<template>
  <div id="container"></div>
</template>

<script>
import AMapLoader from "@amap/amap-jsapi-loader";
export default {
  name: "map-view",
  mounted() {
    this.initAMap();
  },
  unmounted() {
    this.map?.destroy();
  },
  methods: {
    initAMap() {
      window._AMapSecurityConfig = {
        securityJsCode: "917af2e676a01a7d444e2021f1c050cb",
      };
      AMapLoader.load({
        key: "917af2e676a01a7d444e2021f1c050cb", // 申请好的Web端开发者Key，首次调用 load 时必填
        version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
        plugins: ["AMap.Scale"], //需要使用的的插件列表，如比例尺'AMap.Scale'，支持添加多个如：['...','...']
      })
        .then((AMap) => {
          // this.map = new AMap.Map("container", {
          //   // 设置地图容器id
          //   viewMode: "3D", // 是否为3D地图模式
          //   zoom: 11, // 初始化地图级别
          // });
          var arr = new Array(); //经纬度坐标数组
          arr.push(new AMap.LngLat("116.368904", "39.913423"));
          arr.push(new AMap.LngLat("116.382122", "39.901176"));
          arr.push(new AMap.LngLat("116.387271", "39.912501"));
          arr.push(new AMap.LngLat("116.427097", "39.912500"));
          // const polyline = new AMap.Polyline({
          //   path: arr,
          //   strokeColor: "red",
          //   strokeOpacity: 1,
          //   strokeWeight: 3,
          //   strokeDasharry: [10, 5],
          // });
          // polyline.setMap(this.map);

          const distance = Math.round(AMap.GeometryUtil.distanceOfLine(arr));
          //   const text = new AMap.Text({
          //     position: new AMap.LngLat("116.397428", "39.933423"), // 文本标记点位置
          //     text: distance + "米", // 文本标记内容
          //     offset: new AMap.Pixel(-20, -10), // 相对于标记点的偏移位置
          //   });
          //   this.map.add(text);
          //   this.map.setFitView();
          console.log(distance);
        })
        .catch((e) => {
          console.log(e);
        });
    },
  },
};
</script>

<style  scoped>
#container {
  padding: 0px;
  margin: 0px;
  width: 400px;
  height: 300px;
}
</style>